<template>
    <div class="header">
        <ul class="left">
            <li>
                <img src="../assets/images/logo.png" alt="图片未显示">
            </li>
            <li>
                <span>新空安无人机管理系统</span>
                <span class="newFlyer">{{text}}</span>
            </li>
        </ul>
        <ul class="right">
            <li>admin</li>
            <li>
                <el-dropdown trigger="click">
                   <span class="el-dropdown-link">
                      <i class="el-icon-caret-bottom el-icon--right"></i>
                   </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="logOut">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </li>
        </ul>
    </div>
</template>

<script lang=ts>
  import {logOut} from '../helper/auth';

  export default {
    name: 'Header',
    props: {
      text: {
        type: String,
        default: ''
      }
    },
    methods: {
      logOut() {
        logOut();
        this.$router.push('/login');
      }
    }
  };
</script>

<style scoped lang=scss>
    .header {
        background: rgb(243, 243, 244);
        padding: 16px 24px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;

        .left {
            display: flex;
            align-items: center;

            li {
                display: flex;
                flex-direction: column;

                &:nth-child(1) {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: white;
                    width: 64px;
                    height: 64px;
                    border-radius: 50%;
                    margin-right: 48px;
                    margin-left: 16px;

                }

                .newFlyer {
                    font-size: 14px;
                    margin-top: 8px;
                }
            }
        }

        .right {
            position: absolute;
            right: 32px;
            top: 16px;
            display: flex;
        }
    }
</style>